<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>Title</title>
</head>
<body>

<!--
    1,vue中常用的按键别名
        回车=》enter
        删除=》delete（捕获"删除"和"退格"键）
        推出=》esc
        空格=》space
        换行=》tab  (特殊  配合keydown)
        上=》up
        下=》down
        左=》left
        右=》right
     2，vue中为提供别名的按键，可以使用按键的原始的 key值去绑定 但要注意转为kebab-cass（短横线命名）
     3，系统修饰键（用法特殊）：ctrl、alt、shift、meta
            1，配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
            2，配合keydown 使用：正常触发事件
     4，可以使用keycode去指定具体的按键（不推荐）
     5，vue.config。keycodes 自定义键名=键码  可以定制按键别名

-->
    <div id="root">
        <h2>欢迎来到{{name}}</h2>
      <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showinfo">
    </div>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: '召唤师峡谷'
      },
      methods:{
          showinfo(e){
              console.log(e.key,e.keyCode)
              console.log(e.target.value)
          }
      }
    })
  </script>
</body>
</html>